{% extends 'back/index.html' %}

{% block content %}
    <div class="rt_content">
        <div class="page_title">
            <h2 class="fl">商品详情</h2>
            <a href="{% url 'products_list' %}" class="fr top_rt_btn">返回产品列表</a>
        </div>
        <section>
            <div class="portlet-body form" style="margin-top: 30px ;">
                <form action="/products_detail/" class="form-horizontal" method="post" enctype="multipart/form-data">
                    <div class="form-body">
                        <input class="hide" value="{{ product.id }}" name="id">
                        <div class="form-group">
                            <label class="col-md-2 control-label">商品名称：</label>
                            <div class="col-md-4">
                                <input type="text" class="form-control" name="name" required="required"
                                       value="{{ product.name }}" placeholder="商品名称..."/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">品牌：</label>
                            <div class="col-md-4">
                                <select class="form-control" name="brand" id="brand">
                                    <option>选择品牌</option>
                                    <option value="星海">星海</option>
                                    <option value="雅马哈">雅马哈</option>
                                    <option value="珠江">珠江</option>
                                    <option value="海伦">海伦</option>
                                    <option value="凤玲">凤玲</option>
                                    <option value="其他">其他</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">乐器种类：</label>
                            <div class="col-md-4">
                                <select class="form-control" name="category" id="category">
                                    <option>选择种类</option>
                                    <option value="吉他">吉他</option>
                                    <option value="小提琴">小提琴</option>
                                    <option value="钢琴">钢琴</option>
                                    <option value="萨克斯">萨克斯</option>
                                    <option value="架子鼓">架子鼓</option>
                                    <option value="其他">其他</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">商品型号：</label>
                            <div class="col-md-4">
                                <input type="text" class="form-control" name="type" required="required"
                                       value="{{ product.type }}" placeholder="商品型号..."/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">商品颜色：</label>
                            <div class="col-md-4">
                                <input type="text" class="form-control" name="color" required="required"
                                       value="{{ product.color }}" placeholder="商品颜色..."/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">商品原价：</label>
                            <div class="col-md-4">
                                <input type="text" class="form-control" name="old_price" required="required"
                                       value="{{ product.old_price }}" placeholder="单位：元"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">商品现价：</label>
                            <div class="col-md-4">
                                <input type="text" class="form-control" name="new_price" required="required"
                                       value="{{ product.new_price }}" placeholder="单位：元"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">现有库存：</label>
                            <div class="col-md-4">
                                <input type="text" class="form-control" name="stock" required="required"
                                       value="{{ product.stock }}" placeholder="现有库存"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">销售状态：</label>
                            <div class="col-md-4">
                                <select class="form-control" name="status" id="status"">
                                <option>选择状态</option>
                                <option value="0">未上架</option>
                                <option value="1">上架中</option>
                                <option value="2">热销</option>
                                <option value="3">缺货</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">商品照片: </label>
                            <div class="col-md-8">
                                <input class="hide" id='pictures' type="file" name="pictures" multiple>
                                {% for p in pictures %}
                                    <p><a target="_blank" href="/media/img_products/{{ p }}">{{ p }}</a></p>
                                {% endfor %}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-2 control-label">商品介绍：</label>
                            <div class="col-md-8">
                                <textarea type="text" class="form-control" name="introduction" required="required"
                                          placeholder="不多于200字..." rows="4">{{ product.introduction }}</textarea>
                            </div>
                        </div>

                        <div class="form-actions">
                            <label class="col-md-2 control-label"></label>
                            <div class="col-md-4">
                                <button type="button" class="link_btn"
                                        style="float: left;margin-right: 12px;margin-bottom:30px"
                                        onclick="modify()">修改
                                </button>
                                <button type="submit" class="link_btn" style="float: left">提交</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

        </section>
    </div>

    <script type="text/javascript">
        jQuery(document).ready(function () {
            $("input").attr("disabled", "disabled");
            $("select").attr("disabled", "disabled");
            $("textarea").attr("disabled", "disabled");

            //对所有None的input赋空值
            $("input").each(function () {
                if ($(this).val() === "None") {
                    $(this).val("");
                }
            });

            (function select_init() {
                {# 选择框初始化 #}
                var brand = {{ brand|safe }};
                $('#brand').val(brand);

                var category = {{ category|safe }};
                $('#category').val(category);

                var status = {{ product.status }};
                $('#status').val(status);
            })();


        });

        function modify() {
            $("input").removeAttr("disabled");
            $("select").removeAttr("disabled");
            $("textarea").removeAttr("disabled");
            $("#pictures").removeClass("hide")
        }

        (function ($) {
            $(window).load(function () {
                $('#drop1').collapse('show');
                $('#1-3').addClass('active');
            });
        })(jQuery);
    </script>


{% endblock %}
